<template>
	<div class="Games" >
    <template v-if='!isFiltrate'>
      <div class="header">
        <router-link to='/home2'>
          <div class="header-left iconfont">&#xe623;</div>
        </router-link>
        <div class="header-center">篮球数据</div>
        <div class="header-right iconfont" @click.stop='isFiltrate = !isFiltrate'>&#xe601;</div>
      </div>
      <Games-date v-on:changDateList='changDateListFun'></Games-date>
      <div class="playList">
        <ul v-if='gameList.length > 0'>
          <router-link
            tag="li"
            v-for="item of gameList"
            :key="item.mid"
            :to="'/DeatilLQ/' + item.mid"
          >
            <p class="li-tit">
            <span>{{ item.ln }}<font>{{ item.sd}}</font></span>
            <font class="state">
             <i v-if='item.sts == "inprogress"' class="redColor">
              <template v-if='item.current_quarter=="halftime"'>
                中场休息
              </template>
              <template v-if='item.current_quarter=="ext"'>
                加时赛
              </template>
              <template v-if='item.hm_p1'>
                上半场
              </template>
              <template v-if='item.hm_p2'>
                下半场
              </template>
              <template v-else>
                第{{ item.current_quarter }}节<b class="dian">'</b>
              </template>
            </i>
            <i v-else-if='item.sts == "notstarted"'>未开始</i>
            <i v-else-if='item.sts == "finished"'>已结束</i>
            <i v-else>取消</i>
          </font>
          </p>
          <div class="li-con">
            <div class="li-con-left">
              <img :src='getImgUrl(item.hig)' :onerror="logo">
              <span>
                <template v-if='item.sts == "notstarted"'>
                  {{item.hz}}
                </template>
                <template v-else>
                  {{item.hz | ellipses("10")}}
                </template>
              </span>
              <div class="bifen">
              <template v-if='item.type==3'>
                <!--四节-->
                <span v-if='item.hm_q1'>{{ item.hm_q1 }}</span>
                <span v-if='item.hm_q2'>{{ item.hm_q2 }}</span>
                <span v-if='item.hm_q3'>{{ item.hm_q3 }}</span>
                <span v-if='item.hm_q4'>{{ item.hm_q4 }}</span>
                <span v-if='item.hm_ext'>{{ item.hm_ext }}</span>
                <span v-if='item.hm_rs&&item.hm_rs!=0' class="redColor">{{ item.hm_rs }}</span>
              </template>
              <template v-if='item.type==2'>
                <!--上下半场-->
                <span v-if='item.hm_p1'>{{ item.hm_p1 }}</span>
                <span v-if='item.hm_p2'>{{ item.hm_p2 }}</span>
                <span v-if='item.hm_rs&&item.hm_rs!=0' class="redColor">{{ item.hm_rs }}</span>
              </template>
            </div>
            </div>
            <div class="li-con-right">
              <img :src='getImgUrl(item.aig)' :onerror="logo">
              <span>
                  <template v-if='item.sts == "notstarted"'>
                    {{item.az}}
                  </template>
                  <template v-else>
                    {{item.az | ellipses("10")}}
                  </template>
              </span>
              <div class="bifen">
               <template v-if='item.type==3'>
                <!--四节-->
                <span v-if='item.aw_q1'>{{ item.aw_q1 }}</span>
                <span v-if='item.aw_q2'>{{ item.aw_q2 }}</span>
                <span v-if='item.aw_q3'>{{ item.aw_q3 }}</span>
                <span v-if='item.aw_q4'>{{ item.aw_q4 }}</span>
                <span v-if='item.aw_rs&&item.aw_rs!=0' class="redColor">{{ item.aw_rs }}</span>
              </template>
              <template v-if='item.type==2'>
                <!--上下半场-->
                <span v-if='item.aw_p1'>{{ item.aw_p1 }}</span>
                <span v-if='item.aw_p2'>{{ item.aw_p2 }}</span>
                <span v-if='item.aw_rs&&item.aw_rs!=0' class="redColor">{{ item.aw_rs }}</span>
              </template>
              </div>
            </div>
          </div>
          </router-link>
        </ul>
        <p v-else class="noData">暂无比赛</p>
      </div>
    </template>
		<template v-else='isFiltrate'>
      <Games-filtrate :list='opList' :type='type'  @handcheckList='handcheckListEvent'></Games-filtrate>
    </template>
	</div>	
</template>
<script>
import GamesHeader from './components/Header'
import GamesDate from './components/Date'
import GamesFiltrate from './components/filtrate'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'Games',
	components:{
		GamesHeader,
		GamesDate,
    GamesFiltrate,
	},
	data:function(){
		return {
			AllgameList:[],
      gameList:[],
      year:'',
      month:'',
      currentDay:'',
			logo:'this.src="/static/img/basket.png"',
      isFiltrate:false,
      type:'lq'
		}
	},
	methods:{
		getHomeInfo:function(date){
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
      	axios.get('/api/allMatch.php?sportType=23&dateStr='+date)
        .then(this.getHomeInfoSucc)
        .catch(function (error) {
            console.log(error);
          });
    },
    getHomeInfoSucc:function(res){
      res = res.data
      if (res.status == 0 && res.data) {
        const Fdata = res.data.f //所有结束的比赛信息
        const Idata = res.data.i //所有正在进行中的比赛信息
        const Ndata = res.data.n //所有未开始的比赛信息
        const Cdata = res.data.c //所有取消的比赛信息
        const IrCdata = res.data.ir //所有取消的比赛信息

        const opList = res.data.op //所有联赛信息
        this.AllgameList = Idata.concat(Ndata,Fdata,IrCdata,Cdata)
        this.gameList = this.AllgameList
        this.opList = opList
        Indicator.close();
      }
    },
    getImgUrl:function(url) {
      return url;
   },
   changDateListFun:function(data){
    this.currentDay = data
    this.getHomeInfo(this.year+'-'+this.month+'-'+data)
   },
   handcheckListEvent(list){
      this.isFiltrate = !this.isFiltrate
      var newList = [];
      this.AllgameList.forEach(function(item,i) {
        if (list.indexOf(item.tournament_stage_id) > -1) {
          newList.push(item)
        } 
      })
    this.gameList = newList;
    } 
	},
	mounted () {
		var myDate = new Date();
		var month = myDate.getMonth()+1;//当前月
    if (month < 10) {
      month = '0'+month
    }
		var year = myDate.getFullYear();//当前年
		var day = myDate.getDate(); //当天日
    if (day < 10) {
        day = '0'+day
      }
		this.year = year
    this.month =month
    this.currentDay = day
		this.getHomeInfo(year+'-'+month+'-'+day);
	},
  activated () {}
};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  @import '~styles/header.less';
  .playList{
    padding-top:2.7rem; 
  }
  .title{
    padding: .25rem;
    text-align: left; 
    span{
      height: .27rem;
      line-height: .27rem;
      overflow: hidden;
      border-left:.06rem @greenColor solid;
      padding-left:.18rem;
    }
  }
  .li-tit{
    height: .49rem;
    line-height: .49rem;
    display: flex;
    padding:0 .25rem;
    justify-content: space-between;
    background: #F5F8FB;
    span{
      flex: 1;
      color: #828181;
      font{
        margin-left:.4rem;
        color: #2F2F2F;
      }
    }
    i{
      font-size: .22rem;
      color: #828181;
    }
  }
  .li-con{
    padding:.25rem;
    .li-rank{
      font-size: .22rem;
      color: @grayColor;
    }
    .li-con-left,.li-con-right{
      padding:.1rem 0;
      display: flex;
      align-items:center;
      img {
        width: .5rem;
        height: .5rem;
        margin-right: .2rem;
      }
      p{
        vertical-align: text-bottom;
      }
      .bifen{
        text-align: right;
        flex: 1;
        padding-right: .2rem;
        span{
          margin:0 .05rem;
        }
      }
    }
    .li-con-vs{
      flex: 3;
      color: @grayColor2;
      font-weight: 600;
      align-self:flex-start;
      font-size: .22rem;
      p{
        font-size: .4rem;
        padding-bottom:.3rem;
      }
    }
  }
</style>
